<template>
<div>
	<!-- 面包屑导航 -->
	<el-breadcrumb separator-class="el-icon-arrow-right">
	  <el-breadcrumb-item :to="{ path: '/welcom' }">首页</el-breadcrumb-item>
	  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
	  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
	</el-breadcrumb>
	<el-card class="box-card">
		 
		 <el-table
		    :data="powerList"
		    style="width: 100%"
			border
			stripe
		    >
			<el-table-column  type="index" label="#"  :index="indexMethod"></el-table-column>
		    <el-table-column
		      prop="authName"
		      label="权限名称"
		      width="400">
		    </el-table-column>
		    <el-table-column
		      prop="path"
		      label="路径"
		      width="400">
		    </el-table-column>
		    <el-table-column
		      prop="level"
		      label="权限等级"
			  :filters="[{ text: '一级', value: '0' }, { text: '二级', value: '1' }, { text: '三级', value: '2' }]"
			  :filter-method="filterTag">
			  <template slot-scope="scope">
			          <el-tag :type="getRowType(scope.row.level)"	effect="dark" v-if="scope.row.level === '0' ">一级权限</el-tag>
						<el-tag :type="getRowType(scope.row.level)" effect="dark" v-if="scope.row.level === '1' ">二级权限</el-tag>
						<el-tag :type="getRowType(scope.row.level)" effect="dark" v-if="scope.row.level === '2' ">三级权限</el-tag>
			        </template>
		    </el-table-column>
		  </el-table>
	</el-card>
</div>
</template>

<script>
	export default{
		created() {
			this.getPowerList()
		},
     data() {
		 return {
			  powerList: []
		 }
	 },
	 methods:{
		 //页表索引值
		indexMethod(index) {
		         return index+1;
		       },
	    //等级标签筛选
		filterTag(value, row){
				  return row.level === value; 
			   },
		async getPowerList(){
			const  { data: res } = await this.$http.get('rights/list')
			//console.log(res)
			if( res.meta.status !== 200 )
			return this.$message.error(res.meta.msg)
			
			this.powerList = res.data
			console.log(this.powerList)
		},
		getRowType(levels){
			console.log(levels)
			if(levels === '0')
			return ''
			else if(levels === '1')
			return 'success'
			else
			return 'warning'
		}
	 }
	}
</script>

<style lang="less" scoped>
</style>
